<template>
  <view class="custom-nav-bar">
    <view :style="{ paddingTop: safeAreaInsets?.top + 'px' }"></view>
    <view class="top">
      <view class="location">
        <view>
          <text>雁塔区</text>
          <text class="iconfont icon-xiala"></text>
        </view>
        <text>晴 9℃</text>
      </view>
      <view class="top-nav">
        <view class="search"></view>
        <view>
          <text class="iconfont icon-sousu"></text>
          <text>请输入您需要的服务</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

//存储状态栏的高度
// const statusHeight = ref('')
const { safeAreaInsets } = uni.getSystemInfoSync()
// //计算属性获取状态栏的高度
// const statusHeight = computed(() => {
//   //获取状态栏的高
//   const { safeAreaInsets } = uni.getSystemInfoSync()
//   return safeAreaInsets
// })
// console.log(statusHeight, 222)
</script>

<style lang="scss">
.custom-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 200rpx;
  z-index: 1;
  //   background-image: url('https://pic.616pic.com/bg_w1180/00/04/62/Sc7lyjQQOD.jpg');
  background-size: cover;
  .top {
    // background-color: #ff0000;
    padding: 15rpx 30rpx;
    display: flex;
    align-items: center;
    .location {
      font-size: 24rpx;
      color: #fff;
      view {
        display: flex;
        align-items: center;
      }
    }
    .top-nav {
      position: relative;
      margin-left: 10rpx;
      .search {
        width: 350rpx;
        height: 70rpx;
        border-radius: 10rpx;
        background: #333;
        opacity: 0.2;
      }
      view {
        position: absolute;
        top: 50%;
        left: 5rpx;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        .iconfont {
          font-size: 40rpx;
        }
        text {
          color: #fff;
          display: block;
          font-size: 26rpx;
          width: max-content;
          margin-left: 5rpx;
        }
      }
    }
  }
}
</style>
